<template>
  <div class="beauty-salon-dashboard">
    <!-- 顶部操作栏 -->
    <div class="top-bar">
      <h2>美容院列表</h2>
      <div class="action-buttons">
        <el-button v-for="btn in topButtons" :key="btn.type" :type="btn.type" @click="handleTopButtonClick(btn)">
          {{ btn.text }}
        </el-button>
      </div>
    </div>

    <!-- 主体布局：左侧索引 + 右侧内容 -->
    <div class="main-container">
      <!-- 左侧字母索引列表 -->
      <div class="left-sidebar">
        <el-input v-model="searchSalon" placeholder="输入门店名称搜索" class="search-input" clearable />

        <div class="index-list" v-if="Object.keys(filteredSalonGroups).length">
          <div v-for="(group, letter) in filteredSalonGroups" :key="letter" class="salon-group">
            <div class="group-letter">{{ letter.toUpperCase() }}</div>
            <ul class="salon-items">
              <li v-for="salon in group" :key="salon.id" class="salon-item"
                :class="{ active: selectedSalonId === salon.id }" @click="handleSalonClick(salon)">
                {{ salon.name }}
              </li>
            </ul>
          </div>
        </div>
        <div class="empty-tip" v-else>
          暂无匹配的门店数据
        </div>
      </div>

      <!-- 右侧内容区 -->
      <div class="right-content">
        <!-- 账户卡片区域 -->
        <div class="account-cards">
          <el-card v-for="card in accountCards" :key="card.key" :class="`account-card ${card.key}-card`" shadow="hover"
            @click="handleAccountClick(card)">
            <div class="expand_card">
              <el-icon>
                <Expand />
              </el-icon>
            </div>
            <div class="card-content">
              <div class="card-icon">
                <i :class="card.icon" style="font-size: 24px;"></i>
              </div>
              <div class="card-text">
                <p class="card-name">{{ card.name }}</p>
                <p class="card-value">{{ card.amount }}</p>
              </div>
            </div>
          </el-card>
        </div>

        <!-- 数据表格区域 -->
        <el-table :data="tableData" border style="width: 100%; margin-top: 20px;" highlight-current-row>
          <el-table-column v-for="col in tableColumns" :key="col.prop" :prop="col.prop" :label="col.label"
            :align="col.align || 'center'" :width="col.width" />
          <el-table-column label="操作" align="center" width="80">
            <template #default="scope">
              <el-button type="danger" plain size="mini" @click="handleDetailClick(scope.row)">
                明细
              </el-button>
            </template>
          </el-table-column>
        </el-table>

        <!-- 分页区域 -->
        <div class="pagination">
          <div class="pagination-info">共 {{ total }} 条 共 {{ totalPages }} 页</div>
          <el-pagination background v-model:current-page="pagination.currentPage"
            v-model:page-size="pagination.pageSize" :page-sizes="pagination.pageSizes"
            layout="prev, pager, next, jumper, ->, sizes, total" :total="total" @size-change="handlePageSizeChange"
            @current-change="handlePageNumChange" size="small" />
        </div>
      </div>
    </div>

    <!-- 明细弹窗 -->
    <el-dialog v-model="dialogVisible" title="现金账户明细查询" width="90%" :before-close="closeDialog">
      <div class="detail-form">
        <el-form inline>
          <el-form-item label="订单编号：">
            <el-input v-model="detailOrderInfo.orderNo" disabled />
          </el-form-item>
          <el-form-item label="发货日期：">
            <el-input v-model="detailOrderInfo.deliveryDate" disabled />
          </el-form-item>
          <el-form-item label="经办人：">
            <el-input v-model="detailOrderInfo.handler" disabled />
          </el-form-item>
        </el-form>
      </div>

      <el-table :data="detailTableData" border style="width: 100%; margin-top: 20px;">
        <el-table-column prop="index" label="序号" width="50" sortable />
        <el-table-column prop="productName" label="产品名称" sortable />
        <el-table-column prop="productNo" label="产品编号" sortable />
        <el-table-column prop="brand" label="归属品牌" sortable />
        <el-table-column prop="spec" label="规格" />
        <el-table-column prop="type" label="类型" sortable />
        <el-table-column prop="retailPrice" label="零售价" sortable />
        <el-table-column prop="quantity" label="数量" sortable />
        <el-table-column prop="totalAmount" label="总金额" sortable />
        <el-table-column prop="discount" label="折扣" sortable />
        <el-table-column prop="discountAmount" label="折扣总金额" sortable />
        <el-table-column prop="warehouse" label="发货仓库" sortable />
        <el-table-column prop="status" label="状态" sortable />
      </el-table>

      <div class="pagination" style="margin-top: 20px;">
        <div class="pagination-info">共 {{ detailTotal }} 条 共 {{ detailPages }} 页</div>
        <el-pagination background v-model:current-page="detailPagination.currentPage"
          v-model:page-size="detailPagination.pageSize" :page-sizes="[10, 20, 50]"
          layout="prev, pager, next, jumper, ->, sizes, total" :total="detailTotal"
          @size-change="handleDetailSizeChange" @current-change="handleDetailCurrentChange" size="small" />
      </div>

      <template #footer>
        <el-button @click="dialogVisible = false">关闭</el-button>
      </template>
    </el-dialog>
    <!-- 冻结弹框 -->
    <el-dialog v-model="centerDialogVisible" title="冻结" width="500" center>
      <el-form :model="freeze" label-width="auto" style="max-width: 600px">
        <el-form-item label="现金账户:">
          <el-input v-model="freeze.a" />
        </el-form-item>
          <el-form-item label="年单账户:">
          <el-input v-model="freeze.b" />
        </el-form-item>
          <el-form-item label="政策款账户:">
          <el-input v-model="freeze.c" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="centerDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="centerDialogVisible = false">
            确认
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue';
import { ElMessage, ElDialog, ElForm, ElFormItem, ElInput, ElTable, ElTableColumn, ElPagination, ElButton, ElIcon } from 'element-plus';
import { useRouter } from 'vue-router';
import { Expand } from '@element-plus/icons-vue';

const router = useRouter();

const centerDialogVisible = ref(false);

// -------------------------- 配置化数据 --------------------------
// 顶部按钮配置
const topButtons = [
  { type: 'success', text: '冻结', action: 'freeze', message: '已执行冻结操作' },
  { type: 'warning', text: '清算', action: 'liquidate', message: '已执行清算操作' },
  { type: 'text', text: '返回', action: 'back', message: '返回上一页' }
];
const freeze = {
  a: "",
  b: "",
  c: ""
}
// 账户卡片配置
const accountCards = [
  {
    key: 'cash',
    name: '现金账户',
    amount: '2423万',
    icon: 'el-icon-money',
    description: '可用于日常消费的现金余额'
  },
  {
    key: 'year',
    name: '年单账户',
    amount: '260万',
    icon: 'el-icon-s-order',
    description: '年度套餐专用账户'
  },
  {
    key: 'policy',
    name: '政策款账户',
    amount: '12785万',
    icon: 'el-icon-document',
    description: '公司政策补贴款项'
  },
  {
    key: 'gift',
    name: '赠送账户',
    amount: '12785万',
    icon: 'el-icon-present',
    description: '赠送的消费额度'
  },
  {
    key: 'frozen',
    name: '冻结账户',
    amount: '12785万',
    icon: 'el-icon-user-solid',
    description: '暂时冻结的资金'
  }
];

// 表格列配置
const tableColumns = [
  { prop: 'date', label: '日期', width: 100 },
  { prop: 'orderNo', label: '订单编号', width: 120 },
  { prop: 'storeName', label: '门店名称' },
  { prop: 'brand', label: '销售品牌', width: 100 },
  { prop: 'salesAmount', label: '销售金额(零售价)', width: 140 },
  { prop: 'discount', label: '折扣', width: 100 },
  { prop: 'deductionAmount', label: '扣款金额', width: 100 },
  { prop: 'deductionAccount', label: '扣款账户', width: 100 },
  { prop: 'accountBalance', label: '账户余额', width: 100 }
];

// 分页配置
const pagination = ref({
  currentPage: 1,
  pageSize: 10,
  pageSizes: [10, 20, 50]
});

// -------------------------- 业务数据 --------------------------
// 原始美容院数据
const rawSalons = [
  { id: 1, name: '阿里', letter: 'a' },
  { id: 2, name: '阿里巴巴', letter: 'a' },
  { id: 3, name: '阿里健康', letter: 'a' },
  { id: 4, name: '阿里美妆', letter: 'a' },
  { id: 5, name: '贝里巴巴', letter: 'b' },
  { id: 6, name: '报里巴巴', letter: 'b' },
  { id: 7, name: '呗里美容', letter: 'b' },
  { id: 8, name: '白里透红', letter: 'b' },
  { id: 9, name: '从里到外', letter: 'c' },
  { id: 10, name: '才里美容', letter: 'c' },
  { id: 11, name: '陈记美容院', letter: 'c' },
  { id: 12, name: '东方美', letter: 'd' },
  { id: 13, name: '蒂芙尼美容', letter: 'd' },
];

// 表格数据
const tableData = ref([
  { date: '2022.3.15', orderNo: '87758578', storeName: '一平云端', brand: '蓝妮儿', salesAmount: '¥25545.92', discount: '单品2.1 套盒3.5', deductionAmount: '¥1000.98', deductionAccount: '账户E', accountBalance: '¥2580.71' },
  { date: '2022.3.16', orderNo: '87758579', storeName: '一平云端', brand: '兰蔻', salesAmount: '¥28946.91', discount: '单品1.5 套盒3.5', deductionAmount: '¥1000.98', deductionAccount: '账户A', accountBalance: '¥5081.91' },
  { date: '2022.3.17', orderNo: '87758580', storeName: '阿里美妆', brand: '雅诗兰黛', salesAmount: '¥15678.23', discount: '单品2.0 套盒4.0', deductionAmount: '¥800.50', deductionAccount: '账户B', accountBalance: '¥3200.45' },
]);

// -------------------------- 响应式数据 --------------------------
const searchSalon = ref(''); // 搜索关键词
const selectedSalonId = ref(''); // 选中的美容院ID
const total = ref(tableData.value.length); // 表格总条数
const dialogVisible = ref(false); // 明细弹窗显示状态

// 明细弹窗数据
const detailOrderInfo = ref({
  orderNo: '454545',
  deliveryDate: '2024年10月10日',
  handler: '李四'
});
const detailTableData = ref([
  {
    index: 1,
    productName: '丝芙兰精华眼霜',
    productNo: '3321',
    brand: '丝兰芙',
    spec: '1',
    type: '单品',
    retailPrice: '¥444',
    quantity: 44,
    totalAmount: '¥4444',
    discount: '1.0',
    discountAmount: '¥111',
    warehouse: '一号仓库',
    status: '待发货'
  },
  {
    index: 2,
    productName: '丝芙兰精华眼霜',
    productNo: '3321',
    brand: '丝兰芙',
    spec: '1',
    type: '单品',
    retailPrice: '¥444',
    quantity: 44,
    totalAmount: '¥4444',
    discount: '1.0',
    discountAmount: '¥111',
    warehouse: '一号仓库',
    status: '已发货'
  },
  {
    index: 3,
    productName: '丝芙兰精华眼霜',
    productNo: '3321',
    brand: '丝兰芙',
    spec: '1',
    type: '单品',
    retailPrice: '¥444',
    quantity: 44,
    totalAmount: '¥4444',
    discount: '1.0',
    discountAmount: '¥111',
    warehouse: '一号仓库',
    status: '已完成'
  }
]);
const detailPagination = ref({
  currentPage: 1,
  pageSize: 10,
  pageSizes: [10, 20, 50]
});
const detailTotal = ref(3);
const detailPages = computed(() => Math.ceil(detailTotal.value / detailPagination.value.pageSize));

// -------------------------- 计算属性 --------------------------
// 过滤后的美容院分组（实时搜索）
const filteredSalonGroups = computed(() => {
  const groups = {};
  const keyword = searchSalon.value.toLowerCase().trim();

  rawSalons.forEach(salon => {
    if (keyword === '' || salon.name.toLowerCase().includes(keyword)) {
      const letter = salon.letter;
      if (!groups[letter]) groups[letter] = [];
      groups[letter].push(salon);
    }
  });

  return groups;
});

// 总页数
const totalPages = computed(() => {
  return Math.ceil(total.value / pagination.value.pageSize);
});

// -------------------------- 事件处理 --------------------------
// 顶部按钮点击
const handleTopButtonClick = (btn) => {
    if(btn.action == 'freeze') {
      centerDialogVisible.value = true
    } else if  ( btn.action == 'back' ){
      router.back()
    }
   
  ElMessage[btn.type === 'text' ? 'info' : 'success'](btn.message);
};

// 美容院点击
const handleSalonClick = (salon) => {
  selectedSalonId.value = salon.id;
  ElMessage.info(`已选择美容院：${salon.name}`);
};

// 账户卡片点击
const handleAccountClick = (card) => {
  ElMessage.info(`${card.name} - ${card.description}，余额：${card.amount}`);
};

// 表格明细点击（打开弹窗）
const handleDetailClick = (row) => {
  ElMessage.info(`查看订单 ${row.orderNo} 的明细`);
  dialogVisible.value = true;
};

// 弹窗关闭
const closeDialog = () => {
  dialogVisible.value = false;
};

// 明细分页大小变化
const handleDetailSizeChange = (size) => {
  detailPagination.value.pageSize = size;
  detailPagination.value.currentPage = 1;
};

// 明细页码变化
const handleDetailCurrentChange = (page) => {
  detailPagination.value.currentPage = page;
};

// 分页大小变化
const handlePageSizeChange = (size) => {
  pagination.value.pageSize = size;
  pagination.value.currentPage = 1;
};

// 页码变化
const handlePageNumChange = (page) => {
  pagination.value.currentPage = page;
};
</script>

<style scoped>
.beauty-salon-dashboard {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: 100vh;
  font-size: 14px;
}

/* 顶部栏样式 */
.top-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 1px solid #e4e7ed;
}

.top-bar h2 {
  margin: 0;
  color: #1f2329;
  font-size: 18px;
}

.action-buttons {
  display: flex;
  gap: 12px;
}

/* 主体布局 */
.main-container {
  display: flex;
  gap: 20px;
  height: calc(100vh - 100px);
}

/* 左侧索引列表 */
.left-sidebar {
  width: 240px;
  background: #fff;
  border-radius: 6px;
  padding: 15px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  overflow-y: auto;
}

.search-input {
  margin-bottom: 15px;
}

.index-list {
  padding-top: 5px;
}

.salon-group {
  margin-bottom: 20px;
}

.group-letter {
  font-weight: 600;
  color: #409eff;
  margin-bottom: 8px;
  padding-left: 5px;
}

.salon-items {
  list-style: none;
  padding: 0;
  margin: 0;
}

.salon-item {
  padding: 8px 10px;
  margin-bottom: 2px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.salon-item:hover {
  background-color: #f0f7ff;
  color: #409eff;
}

.salon-item.active {
  background-color: #e6f7ff;
  color: #1890ff;
  font-weight: 500;
}

.empty-tip {
  text-align: center;
  padding: 20px;
  color: #909399;
  font-size: 13px;
}

/* 右侧内容区 */
.right-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 20px;
  /* width:auto; */
  width: calc(100% - 260px);
}

/* 账户卡片 */
.account-cards {
  display: flex;
  gap: 16px;
  padding-bottom: 5px;
}

.account-card {
  flex: 1;
  min-width: 160px;
  border: none;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  border-radius: 10px;
  position: relative;
}

.expand_card {
  position: absolute;
  right: 10px;
  top: 10px;
  color: rgba(255, 255, 255, 0.8);
}

.account-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.card-content {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 10px 5px;
}

.card-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(255, 255, 255, 0.2);
  flex-shrink: 0;
}

.card-text {
  flex: 1;
}

.card-name {
  margin: 0 0 5px 0;
  font-size: 14px;
  opacity: 0.9;
}

.card-value {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
}

/* 卡片颜色 */
.cash-card {
  background: linear-gradient(135deg, #2f5496, #4096ff);
  color: #fff;
}

.year-card {
  background: linear-gradient(135deg, #333, #666);
  color: #fff;
}

.policy-card {
  background: linear-gradient(135deg, #f59e0b, #ffb74d);
  color: #fff;
}

.gift-card {
  background: linear-gradient(135deg, #dc2626, #f87171);
  color: #fff;
}

.frozen-card {
  background: linear-gradient(135deg, #666, #9ca3af);
  color: #fff;
}

/* 分页样式 */
.pagination {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 15px;
  padding: 10px 0;
  color: #606266;
}

.pagination-info {
  font-size: 13px;
}

/* 明细弹窗表单样式 */
.detail-form {
  margin-bottom: 16px;
}

.detail-form .el-form-item {
  margin-right: 20px;
  margin-bottom: 0;
}

/* 响应式调整 */
@media (max-width: 1200px) {
  .account-cards {
    flex-wrap: wrap;
  }

  .account-card {
    width: calc(50% - 8px);
    margin-bottom: 16px;
  }
}

@media (max-width: 768px) {
  .main-container {
    flex-direction: column;
    height: auto;
  }

  .left-sidebar {
    width: 100%;
    height: 300px;
  }

  .account-card {
    width: 100%;
  }
}
</style>